$(function () {
  chartline1('echart1');
  chartline2('echart2');
  chartline3('echart3');
  chartline4('echart4');
  chartline5('echart5');
  chartline6('echart6');

  $('.echarts-tab').on('click', 'li', function () {
    var i = $(this).index();
    if (!$(this).hasClass('current')) {
      $('.echarts-tab').find('li').removeClass('current')
      $(this).addClass('current');
      console.log(i)
      $('.echart1').addClass('op').eq(i).removeClass('op')
    }
  });

  $('.monitor-period').on('click', function(){
    $('.monitor-period-dropdown').toggle();
  })
})

var echartTooltip = {
  trigger: 'axis',
  backgroundColor: '#4fa1a4',
  formatter: '{c}℃',
  borderRadius: 8,
  axisPointer: { // 坐标轴指示器，坐标轴触发有效
    type: 'none' // 默认为直线，可选为：'line' | 'shadow'
  }
};
var echartGrid = {
  left: '3%',
  right: '2%',
  bottom: '40px',
  top: '20px',
  containLabel: true
};
var echartxAxis = {
  axisLine: {
    onZero: false,
    show: true,
    lineStyle: {
      color: '#d4d4d4',
      width: 2,
      shadowColor: '#f49595',
      shadowBlur: 0,
      shadowOffsetX: -1
    }
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    color: '#373737'
  }
}
var echartyAxis = {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#d4d4d4',
      width: 2
    }
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    show: true,
    color: '#7c884e'
  },
};
var color = {
  normal: {
    color: "#00aaeb"
  }
}

function chartline1(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '08:00', '16:00', '24:00', '08:00', '16:00', '24:00', '08:00', '16:00', '24:00', '08:00', '16:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1, 1.3, 1.7, 1.1, 1, 1.5, 1.9,2, 1.7,1.8,1.2,1.7],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}

function chartline2(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1, 1.3, 1.9,2, 1.7,1.8,1.2,1.7, 1.7, 1.1, 1, 1.5,],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}

function chartline3(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1, 1.3, 1.9,2, 1.7,1.8,2,1.7, 1.7, 1.1, 1, 1.5,],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}

function chartline4(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1.7,1.8,1.2, 1, 1.3, 1.9,2, 1.7, 1.7, 1.1, 1, 1.5,],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}

function chartline5(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '06:00', '12:00', '18:00', '24:00', '06:00', '12:00', '18:00', '24:00', '06:00', '12:00', '24:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1.7, 1.7, 1.1, 1, 1.5, 1.7,1.8,1.2, 1, 1.3, 1.9,2,],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}

function chartline6(el, data) {
  var myChart = echarts.init(document.getElementById(el || 'baidumap4'));
  myChart.showLoading();
  var option = {
    tooltip: echartTooltip,
    grid: echartGrid,
    xAxis: [{
      type: 'category',
      echartxAxis,
      data: ['00:00', '08:00', '16:00', '24:00', '08:00', '16:00', '24:00', '08:00', '16:00', '24:00', '08:00', '16:00'],
    }],
    yAxis: [{
      type: 'value',
      max: 8,
      min: 0,
      echartyAxis,
    }],
    series: [{
      name: '温度记录',
      type: 'line', //图表类型 折线图（line） 柱形图（bar）
      symbolSize: 10, //图标尺寸
      symbol: 'circle',
      itemStyle: color,
      lineStyle: color,
      data: [1.7, 1.7, 1.1, 1, 1.5, 1.7,1.8,1.2, 1, 1.3, 1.9,2,],
    }]
  };

  myChart.hideLoading();
  myChart.setOption(option);
}